<template>
  <div class="home">
    <div class="keywords">
      <h3>分类标签选择：</h3>
        <el-radio-group v-model="radio1" class="divides">       
          <el-radio-button label="后端" @click="show"></el-radio-button>
          <el-radio-button label="前端" @click="show"></el-radio-button>
          <el-radio-button label="移动开发" @click="show"></el-radio-button>
          <el-radio-button label="编程语言" @click="show"></el-radio-button>
          <el-radio-button label="Java" @click="show"></el-radio-button>
          <el-radio-button label="Python" @click="show"></el-radio-button>
          <el-radio-button label="人工智能" @click="show"></el-radio-button>
          <el-radio-button label="大数据" @click="show"></el-radio-button>
          <el-radio-button label="数据结构和算法" @click="show"></el-radio-button>
          <el-radio-button label="云平台" @click="show"></el-radio-button>
          <el-radio-button label="服务器" @click="show"></el-radio-button>
          <el-radio-button label="操作系统" @click="show"></el-radio-button>
          <el-radio-button label="数据库" @click="show"></el-radio-button>
          <el-radio-button label="iOS" @click="show"></el-radio-button>
          <el-radio-button label="Android" @click="show"></el-radio-button>
          <el-radio-button label="小程序" @click="show"></el-radio-button>
          <el-radio-button label="硬件开发" @click="show"></el-radio-button>
          <el-radio-button label="微软技术" @click="show"></el-radio-button>
          <el-radio-button label="软件工程" @click="show"></el-radio-button>
          <el-radio-button label="网络" @click="show"></el-radio-button>
          <el-radio-button label="搜索" @click="show"></el-radio-button>
          <el-radio-button label="游戏" @click="show"></el-radio-button>
          <el-radio-button label="区块链" @click="show"></el-radio-button>
          <el-radio-button label="设计" @click="show"></el-radio-button>
          <el-radio-button label="搜索" @click="show"></el-radio-button>
          <el-radio-button label="游戏" @click="show"></el-radio-button>
        </el-radio-group>
      <h3 v-if="this.radio1=='推荐内容'">推荐阅读:</h3>
    </div>
    <div class="result">
      <div v-for="i in count" class="exhibit">
        <h3><router-link :to="{path:'/exhibit',query:{blog_id:results[i-1].blog_id}}" @click.native="update(results[i-1].blog_id)">{{results[i-1].title}}</router-link></h3>
        <div class="context">
            <div class="summary"><h5 id="summary">{{results[i-1].summary}}</h5></div>
            <h5 id="info" style="white-space:nowrap;" >
                <pre style="font-size:12px;font-family:'PingFang SC';">点击量：{{results[i-1].click}}   点赞数：{{results[i-1].likes_number}}    {{results[i-1].date}}  <router-link :to="{path:'/space',query:{author_id:results[i-1].author_id}}">{{results[i-1].author}}</router-link> </pre>  
            </h5>
        </div>
        <div class="img" v-if="results[i-1].has_picture=='true'">
            <img :src="results[i-1].picture_url">
        </div>
      </div>
  </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'HomeView',
  data(){
    return{     
      radio:"1", 
      input:'',
      input_search:'',
      radio1: '推荐内容',
      tmp_radio:'后端',
      input_others:'',
      count:0,
      results:[]
    }
  },
  methods:{
        load(){
            this.count+=2;
        },
        async show(){
            this.$router.push({path:'/home',query:{key:this.radio1}})
              let {data} = await axios.post('http://localhost:8080/search',{content:this.radio1,search_way:'3'})
            
            console.log(data);
            if(data.errno==0){
              this.results=data.data;
              this.tmp_radio=this.radio1;
              if(this.results.length>=20){
                this.count=20;
              }
              else{this.count=this.results.length}
            }
            else{
              window.alert(data.message)
              this.$router.push({path:'/home',query:{key:this.tmp_radio}})
              this.radio1=this.tmp_radio
            }
        },
        async recommend(){
          this.$router.push({path:'/home',query:{key:this.radio1}})
              let {data} = await axios.post('http://localhost:8080/recommend',{user_id:this.$store.state.user_id})
            
            console.log(data);
            if(data.errno==0){
              this.results=data.data;
              this.tmp_radio='推荐内容';
              this.radio1='推荐内容';
              if(this.results.length>=20){
                this.count=20;
              }
              else{this.count=this.results.length}
            }
            else{
              window.alert(data.message)
              this.$router.push({path:'/home',query:{key:this.tmp_radio}})
              this.radio1=this.tmp_radio
            }
        },
        scrollBottom(){
            let scrollTop = document.documentElement.scrollTop;//滚动高度
            let clientHeight = document.documentElement.clientHeight;//可视高度
            let scrollHeight = document.documentElement.scrollHeight;//内容高度
             if (clientHeight + scrollTop >= scrollHeight-20) {
                this.count+=20;
                if(this.count>=this.results.length){
                    this.count=this.results.length;
                }
            }
        },
        async update(blog_id){
            let {data} = await axios.post('http://localhost:8080/clickBlog',{
                    blog_id:blog_id,
                    user_id:this.$store.state.user_id
            })
            console.log(data);
            this.$store.commit('changeid',blog_id);
            console.log(this.$store.state.blog_id);
            if(data.errno!=1){
              window.alert(data.message)
              this.$router.push({path:'/home',query:{key:this.radio1}})
            }
        },
        search(){
          if(this.input==''){
            alert("请输入搜索内容！");
          }
          else{
            this.$router.push({path:"/result",query:{search:this.input,way:this.radio}});
          }
        },
    },
    created(){
      if(this.$store.state.isLogin==false){
        this.radio1='后端'
        this.show()
      }
      else{
        this.radio1='推荐内容'
        this.recommend()
      }
    },
    watch: {
      'radio1': 'show'
    },
    mounted(){
    //添加滚动事件，检测滚动到页面底部
    window.addEventListener('scroll', this.scrollBottom)
    },
  
}
</script>

<style lang="scss" scoped>
*{
  margin:10px;
  padding:0px;
}
.home{
  background: white;
  .search{
    background: white;
  }
  input{
    width:800px;
    height:30px;
  }
  .keywords{
    .search{
      position:relative;
      left:350px;
      input{
      width:400px;
      height:30px;
      position:relative;
      }
    }
    background:white;
    position:fixed;
    top:50px;
    z-index: 10;
  }
  .exhibit{
    position:relative;
    top:310px;
    border:1px solid #ccc;
    background: white;
    width:95%;
    height:200px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    .context{
     .summary{
        color:gray;
        font-family:'宋体';
        border:1px solid white;
        width:60%;
     }
     .info{
        padding:10px;
     }
    }
    .img{
        width:38%;
        img{
        width: 150px;
        height: 93px;
        position: relative;
        left:800px;
        top:-100px;
        }
    }
  }
}

</style>

